<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>分类</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/main.css" />
		<script src="../../libs/js/vue.min.js"></script>
		<script src="../../libs/js/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="../../libs/js/ajax.js"></script>
		</style>
	</head>

	<body>
		<div id="app">
			<div id="header">
				<van-search placeholder="请输入搜索关键词" v-model="value"></van-search>
			</div>
			<van-row>
				<van-col span="6">
					<van-badge-group :active-key="activeKey" @change="onChange">
						<van-badge @click="change(item)" :title="item.Name" v-for="item in Categories">

						</van-badge>
					</van-badge-group>
				</van-col>
				<van-col span="18">
					<van-col span="12" v-for="item in products">
						<div style="width: 100%;">
							<img v-lazy="item.GoodsImageUrl" style="width: 100%;" alt="">
						</div>
						<div>
							{{item.Name}}
						</div>
					</van-col>
				</van-col>
			</van-row>
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload, {
				error: "../../img/shopping_default_3.jpg",
				loading: './static/loading.png'
			});
			var vm = new Vue({
				el: "#app",
				data: {
					value: "",
					active: 0,
					activeKey: 1,
					Categories: [],
					products: []
				},
				methods: {
					onChange: function(key) {
						this.activeKey = key;
					},
					change: function(item) {
						this.getProduct(this.Categories[this.activeKey].Id)
					},
					getCategories: function() {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/Categories",
							dataType: "jsonp",
							success: function(res) {
								_this.Categories = res.Categories;
								_this.getProduct(_this.Categories[_this.activeKey].Id)
							}
						})
					},
					getProduct: function(id) {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/GoodsByCategoryId",
							dataType: "jsonp",
							data: {
								typeId: id,
								p: 1
							},
							success: function(res) {
								_this.products = res.Data;
							}
						})
					}
				},
				created() {
					this.getCategories();
				}
			})
		</script>
	</body>

</html>